/**
 * Created by fanweihua on 2016/12/5.
 */
import React from "react";
const LevelSpecification = React.createClass({
    getInitialState: function () {
        return {
            padding_top: "30px",
            urlPath: "http://" + window.location.host + "/weui-master/dist/example/index.html"
        };
    },
    componentDidMount: function () {
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            width: 200,
            height: 200
        });
        qrcode.makeCode("http://" + window.location.host + "/weui-master/dist/example/index.html");
    },
    render() {
        return (
            <div className="Z_slideIn">
                <div className="page slideIn">
                    <div className="Z_content_code">
                        <div className="page__hd">
                            <h1 className="page__title">
                                WeUI
                            </h1>
                            <p className="page__desc">本框架采用的UI是WeUI，WeUI
                                是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。</p>
                            <h1 className="page__title" style={{paddingTop: this.state.padding_top}}>
                                React
                            </h1>
                            <p className="page__desc">
                                React 起源于 Facebook，是一套JavaScript MVC 框架，由于 React
                                的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。<br></br>
                                优点：<br></br>
                                <span>1.能够实现服务器端的渲染，便于搜索引擎优化。</span>
                                <br></br>
                                <span>2.一切都是组件，所以代码更加模块化，重用代码更容易。</span>
                                <br></br>
                                <span>3.学起来非常容易，几个小时就可以入门。</span>
                                <br></br>
                                <span>4.用了virtual dom，所以性能很好。</span>
                                <br></br>
                                <span>4.从this.props和this.state生成HTML，所以非常的functional programming（函数式编程：主要思想是把运算过程尽量写成一系列嵌套的函数调用）。</span>
                                <br></br>
                                缺点：<br></br>
                                <span>并不是一个完整的框架，基本都需要加上ReactRouter（路由）和Redux（状态，王麒涵讲述）才能写大型应用</span>
                            </p>
                            <h1 className="page__title" style={{paddingTop: this.state.padding_top}}>
                                React Router
                            </h1>
                            <p className="page__desc">
                                路由库React-Router，它是官方维护的，事实上也是唯一可选的路由库，它通过管理 URL，实现组件的切换和状态的变化。
                            </p>
                            <h1 className="page__title" style={{paddingTop: this.state.padding_top}}>
                                Redux
                            </h1>
                            <div className="page__desc">
                                <p>Redux 是 JavaScript 状态容器，提供可预测化的状态管理。其设计思想是</p>
                                <ol style={{marginLeft:'1rem'}}>
                                    <li>Web 应用是一个状态机，视图与状态是一一对应的。</li>
                                    <li>所有的状态，保存在一个对象里面。</li>
                                </ol>
                                <h2>使用场景</h2>
                                <h3>不需要引入</h3>
                                <ul style={{listStyle: 'circle',marginLeft:'1rem'}}>
                                    <li>用户的使用方式非常简单</li>
                                    <li>用户之间没有协作</li>
                                    <li>不需要与服务器大量交互，也没有使用 WebSocket</li>
                                    <li>视图层（View）只从单一来源获取数据</li>
                                </ul>
                                <p>如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。</p>
                                <h3>需要引入</h3>
                                <p>多交互、多数据源</p>
                                <ul style={{listStyle: 'circle',marginLeft:'1rem'}}>
                                    <li>用户的使用方式复杂</li>
                                    <li>不同身份的用户有不同的使用方式（比如普通用户和管理员）</li>
                                    <li>多个用户之间可以协作</li>
                                    <li>与服务器大量交互，或者使用了WebSocket</li>
                                    <li>View要从多个来源获取数据</li>
                                </ul>
                                <p>组件角度</p>
                                <ul style={{listStyle: 'circle',marginLeft:'1rem'}}>
                                    <li>某个组件的状态，需要共享</li>
                                    <li>某个状态需要在任何地方都可以拿到</li>
                                    <li>一个组件需要改变全局状态</li>
                                    <li>一个组件需要改变另一个组件的状态</li>
                                </ul>
                            </div>
                            <h1 className="page__title" style={{paddingTop: this.state.padding_top}}>
                                原示例：
                            </h1>
                            <p className="page__desc" style={{overflow: "hidden"}}>
                                <span id="qrcode" style={{float: "left"}}></span>
                                <a href={this.state.urlPath} target="_blank"
                                   style={{position: "absolute", bottom: "40px", marginLeft: "20px"}}>查看</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div className="Z_content">
                    <div className="Z_panel-body-backgound">
                        <LevelSpecificationNav></LevelSpecificationNav>
                    </div>
                </div>
            </div>
        );
    }
});
module.exports = LevelSpecification;
const LevelSpecificationNav = React.createClass({
    componentDidMount: function () {
        var $layers = $(".layers__layer"), $infos = $(".j_info"),
            hideTimeout;

        function showInfo(name) {
            $infos.filter("[data-for='" + name + "']").show().siblings().hide();
        }

        function hideIfLayerShowing() {
            if ($layers.filter(".j_transform").length != $layers.length) { // 展示中
                showInfo("normal");
                $layers.addClass("j_transform");

                clearTimeout(hideTimeout);
                hideTimeout = setTimeout(function () {
                    $layers.removeClass("j_hide");
                }, 300);
                return true;
            }
            return false;
        }

        $layers.on("transitionend webkitTransitionend", function () {
            var that = this;
            if (that.classList.contains("j_transform")) {
                setTimeout(function () {
                    that.classList.remove("j_pic");
                }, 500);
            } else {
                that.classList.add("j_pic");
            }
        });
        setTimeout(function () {
            $layers.addClass("j_transform");

            $(".j_layer").on("click", function (e) {
                if (hideIfLayerShowing()) return;

                var target = this;
                if (target.classList.contains("j_layer")) {
                    clearTimeout(hideTimeout);

                    var name;
                    target = $(target);
                    name = target.data("name");
                    showInfo(name);

                    target.removeClass("j_transform").siblings().addClass("j_hide");
                }
            });
        }, 500);
        $(".Z_panel-body").css({
            "overflow": "hidden"
        });
    },
    render(){
        return (
            <div className="Z_panel-body">
                <div className="page__hd">
                    <div className="j_info page__info" data-for="normal">
                        <h2 className="page__title">WeUI页面层级</h2>
                        <p className="page__desc">用于规范WeUI页面元素所属层级、层级顺序及组合规范。</p>
                    </div>
                    <div className="j_info page__info" data-for="popout" style={{display: "none"}}>
                        <h2 className="page__title">Popout</h2>
                        <p className="page__desc">弹出层，作为内容层和导航层的补充，用于承载弹窗通知、操作菜单、菜单、成功或加载中等状态的Toast，表单报错提示等弹出内容。</p>
                    </div>
                    <div className="j_info page__info" data-for="mask" style={{display: "none"}}>
                        <h2 className="page__title">Mask</h2>
                        <p className="page__desc">蒙层，配合Popout层使用，用于锁定内容层和导航层操作，不单独使用。</p>
                    </div>
                    <div className="j_info page__info" data-for="navigation" style={{display: "none"}}>
                        <h2 className="page__title">Navigation</h2>
                        <p className="page__desc">导航层，位于内容层之上，在用户滑动内容层时可保持位置不动，通常用于承载导航栏等需要固定在页面的元素。</p>
                    </div>
                    <div className="j_info page__info" data-for="content" style={{display: "none"}}>
                        <h2 className="page__title">Content</h2>
                        <p className="page__desc">内容层，承载页面主要内容。</p>
                    </div>
                </div>
                <div className="page__bd">
                    <div className="layers j_layers">
                        <div data-name="popout" className="j_layer layers__layer layers__layer_popout j_transform">
                            <span>Popout</span>
                        </div>
                        <div data-name="mask" className="j_layer layers__layer layers__layer_mask j_transform">
                            <span>Mask</span></div>
                        <div data-name="navigation"
                             className="j_layer layers__layer layers__layer_navigation j_transform">
                            <span>Navigation</span></div>
                        <div data-name="content" className="j_layer layers__layer layers__layer_content j_transform">
                            <span>Content</span>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});